<template>
	<el-card class="box-card">
		<el-form :model="formData" ref="formData">
			<el-form-item class="title" label-width="30px">
				<el-col :span="16">地理位置标签</el-col>
			</el-form-item>
			<el-row class="item">
				<el-col :span="1">北京市</el-col>
				<el-col :span="2" style="text-align: center;">行政区:</el-col>
				<el-col :span="21">
					<el-row v-for="item in addressList" :key="item.id">
						<span @click="deleteMeta(item.id,'address',item.childList.length)" class="el-tag el-tag--primary" style="font-size: 16px;margin:0 10px">
							<span style="padding:0 10px;">{{item.value}}</span>
						<i class="el-tag__close el-icon-close" style="float: right;top:3px;"></i></span>

						<el-row style="margin: 10px 0;padding-left: 20px;">
							<el-col :span="1">商圈:</el-col>
							<el-col :span="23">
								<span v-for="obj in item.childList" @click="deleteMeta(obj.id,'address')" class="el-tag el-tag--primary" style="font-size: 16px;margin:0 10px">
								<span style="padding:0 10px;">{{obj.value}}</span>
								<i class="el-tag__close el-icon-close" style="float: right;top:3px;"></i></span>
							</el-col>
						</el-row>
					</el-row>
				</el-col>
			</el-row>
			<el-form-item style="margin-top: 20px;">
				<el-input v-model="city" placeholder="行政区" style="width:20%"></el-input>
				<el-input v-model="sq" placeholder="商圈" style="width:20%"></el-input>
				<el-button @click="addAddress">添加</el-button>
			</el-form-item>
			<el-form-item class="title" label-width="30px">
				<el-col :span="16">年龄大小标签</el-col>
			</el-form-item>
			<el-row class="item">
				<span v-for="item in ageList" @click="deleteMeta(item.id,'age')" class="el-tag el-tag--primary" style="font-size: 16px;margin:0 10px">
					<span style="padding:0 10px;">{{item.value}}</span>
				<i class="el-tag__close el-icon-close" style="float: right;top:3px;"></i></span>
			</el-row>
			<el-form-item style="margin-top: 20px;">
				<el-input v-model="startDate" placeholder="起始月" style="width:20%"></el-input>
				<el-input v-model="endDate" placeholder="结束月" style="width:20%"></el-input>
				<el-select v-model="type" placeholder="请选择">
					<el-option label="月" value="月">
					</el-option>
					<el-option label="岁" value="岁">
					</el-option>
				</el-select>
				<el-button @click="addAge">添加</el-button>
			</el-form-item>
			<el-form-item class="title" label-width="30px">
				<el-col :span="16">遛点范围标签</el-col>
			</el-form-item>
			<el-row class="item">
				<span v-for="item in numberList" @click="deleteMeta(item.id,'number')" class="el-tag el-tag--primary" style="font-size: 16px;margin:0 10px">
					<span style="padding:0 10px;">{{item.value}}</span>
				<i class="el-tag__close el-icon-close" style="float: right;top:3px;"></i></span>
			</el-row>
			<el-form-item style="margin-top: 20px;">
				<el-input v-model="startNumber" placeholder="起始遛点数" style="width:20%"></el-input>
				<el-input v-model="endNumber" placeholder="结束遛点数" style="width:20%"></el-input>
				<span style="padding-left: 10px;">个</span>
				<el-button @click="addNumber">添加</el-button>
			</el-form-item>
			<el-form-item class="title" label-width="30px">
				<el-col :span="16">课程分类标签</el-col>
			</el-form-item>
			<el-row class="item">
				<span v-for="item in classifyList" @click="deleteMeta(item.id,'kctype')" class="el-tag el-tag--primary" style="font-size: 16px;margin:0 10px">
					<span style="padding:0 10px;">{{item.value}}</span>
					<i class="el-tag__close el-icon-close" style="float: right;top:3px;"></i>
				</span>
			</el-row>
			<el-form-item style="margin-top: 20px;">
				<el-input v-model="classifyName" placeholder="输入分类名称" style="width:20%"></el-input>
				<el-button @click="addClassify">添加</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import { metaSave, metaList, metaRemove } from "@/api/getData"
	export default {
		data() {
			return {
				addressList: [],
				ageList: [],
				numberList: [],
				classifyList: [],
				city: "",
				sq: "",
				startDate: "",
				endDate: "",
				type: "",
				startNumber: "",
				endNumber: "",
				classifyName: "",
				formData: {},
			}
		},

		mounted() {
			this.metaList("age");
			this.metaList("number");
			this.metaList("kctype");
			this.metaList("address");
		},
		methods: {
			addAddress: function() {
				let _this = this;
				let parenTemp = "";
				this.addressList.forEach(function(item) {
					if(item.value == _this.city) {
						parenTemp = item.id;
						return false;
					}
				});
				if(parenTemp == "") {
					this.metaSave("address", this.city, "地理位置标签", function(parentId) {
						if(_this.sq != "") {
							_this.metaSave("address", _this.sq, "地理位置标签", undefined, parentId);
						} else {
							_this.$notify({
								title: '成功',
								message: '保存成功',
								type: 'success',
								offset: 100
							});
							_this.metaList("address");
						}
					});
				} else {
					if(_this.sq != "") {
						_this.metaSave("address", _this.sq, "地理位置标签", undefined, parenTemp);
					} else {
						_this.$notify({
							title: '警告',
							message: '行政区已经存在',
							type: 'warning',
							offset: 100
						});
					}
				}

			},
			addAge: function() {
				let value = this.startDate + "-" + this.endDate + this.type;
				this.metaSave("age", value, "年龄大小标签");
			},
			addNumber: function() {
				let value = this.startNumber + "-" + this.endNumber;
				this.metaSave("number", value, "遛点范围标签");
			},
			addClassify: function() {
				this.metaSave("kctype", this.classifyName, "课程分类标签");
				this.$refs.upload.submit();
			},
			async metaList(type) {
				let _this = this;
				let childList = [];
				let parentList = [];
				if(type == "age") {
					_this.ageList = [];
				} else if(type == "number") {
					_this.numberList = [];
				} else if(type == "kctype") {
					_this.classifyList = []
				} else if(type == "address") {
					_this.addressList = []
				}
				const res = await metaList({
					type: type,
					pageSize: "500",
					pageNum: "1",
				});
				if(res.code == "0") {
					res.list.rows.forEach(function(item) {
						let obj = {
							value: item.value,
							id: item.id,
							parentId: item.parentId
						}
						if(type == "age") {
							_this.ageList.push(obj);
						} else if(type == "number") {
							_this.numberList.push(obj);
						} else if(type == "kctype") {
							_this.classifyList.push(obj);
						} else if(type == "address") {
							if(item.parentId != 0) {
								childList.push(obj);
							} else {
								obj.childList = [];
								parentList.push(obj);
							}
						}
					});
					if(type == "address") {
						
						parentList.forEach(function(parent) {
							childList.forEach(function(obj) {
								if(parent.id == obj.parentId) {
									parent.childList.push(obj);
								}
							});
						});
						_this.addressList = parentList;
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async metaSave(type, value, description, callback, parentId) {
				const res = await metaSave({
					type: type,
					value: value,
					description: description,
					parentId: parentId == undefined ? "" : parentId
				})
				if(res.code == "0") {
					if(callback) {
						callback(res.id);
					} else {
						this.$notify({
							title: '成功',
							message: '保存成功',
							type: 'success',
							offset: 100
						});
						this.metaList(type);
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async deleteMeta(id, type, length) {
				if(type == "address" && length != 0) {
					this.$notify({
						title: '警告',
						message: '请先删除下属商圈',
						type: 'warning',
						offset: 100
					});
					return false;
				}
				const res = await metaRemove({
					id: id,
				});
				if(res.code == "0") {
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success',
						offset: 100
					});
					this.metaList(type);
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			}

		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
	}
	
	.item {
		background-color: #f7f7f7;
		padding: 20px
	}
</style>